<!-- 调拨单 -->
<template>
  <div class="container-ymm">

    <div class="header-ymm">
      <el-select v-model="listQuery.depotOutId" placeholder="调出仓" class="seach-select" size="small">
        <el-option v-for="item in listQuery.workout_options" :key="item.warehouseId" :label="item.warehouseName" :value="item.warehouseId"/>
      </el-select>
      <el-select v-model="listQuery.depotInId" placeholder="调入仓" class="seach-select" size="small">
        <el-option v-for="item in listQuery.workin_options" :key="item.warehouseId" :label="item.warehouseName" :value="item.warehouseId"/>
      </el-select>

      <el-date-picker
        v-model="listQuery.date"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      />

      <el-input v-model="listQuery.keyword" type="text" class="seach-input " size="small" placeholder="输入SKU查询">
        <i slot="prefix" class="el-input__icon el-icon-search"/>
      </el-input>
      <el-button class="greenbt" size="small" @click="getList()">查询</el-button>
      <el-button v-show="checkPermission('pas:transfer:add')" class="greenbt" size="small" @click="AddFun()">新增</el-button>
      <!-- <el-button class="greenbt" size="small" @click="receiveFun()">收货</el-button> -->
    </div>
    <div class="table-ymm">
      <el-table v-model="isloading" :data="tableData" style="width: 100%" border @selection-change="handleSelectionChange">
        <!-- <el-table-column type="selection" width="55" :selectable="isRowDisable"/> -->
        <el-table-column label="调拨单号">
          <template slot-scope="scope">
            <span style="color:#28A087">{{ scope.row.allocationNumber }}</span>
          </template>
        </el-table-column>
        <el-table-column label="调出仓">
          <template slot-scope="scope">
            <span >{{ scope.row.depotOut }}</span>
          </template>
        </el-table-column>
        <el-table-column label="调入仓">
          <template slot-scope="scope">
            <span >{{ scope.row.depotIn }}</span>
          </template>
        </el-table-column>
        <el-table-column label="SKU编码">
          <template slot-scope="scope">
            <span >{{ scope.row.skuCode }}</span>
          </template>
        </el-table-column>
        <el-table-column label="条码">
          <template slot-scope="scope">
            <span >{{ scope.row.sequenceNumber }}</span>
          </template>
        </el-table-column>
        <el-table-column label="SKU名称">
          <template slot-scope="scope">
            <span >{{ scope.row.skuName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="调拨状态">
          <template slot-scope="scope">
            <span v-if="scope.row.allocationState=='C10'" style="color:#28A087">发货中</span>
            <span v-else-if="scope.row.allocationState=='D10'" style="color:#F05050">已完成</span>
            <span v-else-if="scope.row.allocationState=='S10'" style="color:#F05050">申请中</span>
          </template>
        </el-table-column>
        <el-table-column label="已发数量">
          <template slot-scope="scope">
            <span >{{ scope.row.allocationAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="收货数量">
          <template slot-scope="scope">
            <span >{{ scope.row.receiveAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间">
          <template slot-scope="scope">
            <span >{{ dateFormat(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="收货时间">
          <template slot-scope="scope">
            <span v-if="scope.row.receiveAmount !==0">{{ dateFormat(scope.row.updateTime) }}</span>
            <span v-if="scope.row.receiveAmount === 0"/>
          </template>
        </el-table-column>

        <el-table-column align="center" label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              v-show="checkPermission('pas:transfer:receipt')"
              :disabled="!(scope.row.allocationState && scope.row.allocationState === 'C10')"
              type="primary"
              size="small"
              icon="el-icon-edit"
              @click="receiveFun(scope.row)"
            >收货</el-button>
          </template>
        </el-table-column>

      </el-table>
    </div>
    <div class="table-ymm-bt">
      <el-pagination
        v-show="total>0"
        :current-page="listQuery.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="listQuery.pageSize"
        :total="total"
        background
        layout="sizes, prev, pager, next,total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>
    <component :is="modal" :modal-data="modalData" @close="closeChild"/>
  </div>
</template>
<script>
import { getAllocation } from '@/api/pas/allocation'
import { queryWarehouseByWarehouseName } from '@/api/pas/shop'
import Addallocation from './dialog/Addallocation.vue'
import Received from './dialog/Received.vue'
import { getUserInfo } from '@/api/login'
export default{
  data() {
    return {
      modal: null, modalData: {},
      listQuery: {
        depotOutId: '', workout_options: [],
        depotInId: '', workin_options: [],
        starTime: '', endTime: '', keyword: '',
        pageNumber: null,
        date: [],
        page: 1,
        pageSize: 10
      },
      dataListQuery: {},
      tableData: [],
      total: 1,
      isloading: true
    }
  },
  created() {
    this.getPermission()
  },
  mounted() {
    this.getWarehouse()

    this.getList()
  },
  methods: {
    // 获取下拉列表
    getWarehouse() {
      queryWarehouseByWarehouseName('').then(res => {
        if (res.data.data && res.data.data.length > 0) {
          var warehouseList = res.data.data.filter((warehouse) => { return warehouse.warehouseName && warehouse.warehouseName !== '中转仓' })
          this.listQuery.workout_options = warehouseList
          this.listQuery.workin_options = warehouseList
        }
      })
    },
    // 分页
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getList()
    },
    // 表格选择
    handleSelectionChange() {

    },
    closeChild() {
      this.modal = null
    },
    AddFun() {
      this.modalData = { type: 'add', 'shutDownModelAndRefresh': this.shutDownModelAndRefresh }
      this.modal = Addallocation
    },
    receiveFun(row) {
      this.modalData = { type: 'update', 'allocation': row, 'shutDownModelAndRefresh': this.shutDownModelAndRefresh }
      this.modal = Received
    },
    shutDownModelAndRefresh() {
      this.modal = null
      this.getList()
    },
    getList() {
      this.dataListQuery.keyword = this.listQuery.keyword
      this.dataListQuery.depotOutId = this.listQuery.depotOutId
      this.dataListQuery.depotInId = this.listQuery.depotInId
      this.dataListQuery.page = this.listQuery.page
      this.dataListQuery.pageSize = this.listQuery.pageSize
      if (this.listQuery.date && this.listQuery.date.length > 0) {
        console.log(this.listQuery.date[0].getTime())
        console.log(this.listQuery.date[1].getTime())
        this.listQuery.starTime = this.listQuery.date[0].getTime()
        this.listQuery.endTime = this.listQuery.date[1].getTime()
        this.dataListQuery.starTime = this.listQuery.starTime
        this.dataListQuery.endTime = this.listQuery.endTime
      }
      this.listQuery.pageNumber = (this.listQuery.page - 1) * this.listQuery.pageSize
      this.dataListQuery.pageNumber = this.listQuery.pageNumber
      getAllocation(this.dataListQuery).then(res => {
        console.warn(res.data.data)
        if (res.data.data) {
          this.tableData = res.data.data.list
          this.total = res.data.data.total
          this.isloading = false
        }
      })
    },
    isRowDisable(row) {
      if (row && row.allocationState && row.allocationState === 'C10') {
        return true
      }
      return false
    },

    getPermission() {
      var arr = document.cookie.split('; ') // 这里显示的格式需要切割一下自己可输出看下

      for (var i = 0; i < arr.length; i++) {
        var arr2 = arr[i].split('=') // 再次切割
        // 判断查找相对应的值
        if (arr2[0] === 'sidebarStatus') {
          this.userid = arr2[1]
        }
      }

      if (localStorage.getItem(this.userid)) {
        return
      }

      getUserInfo().then(response => {
        if (response.data.status === 'ok') {
          localStorage.setItem(
            this.userid,
            JSON.stringify(response.data.data.permissions)
          )
        }
      })
    },

    checkPermission(value) {
      if (value) {
        if (localStorage.getItem(this.userid) && localStorage.getItem(this.userid).indexOf(value) >= 0) {
          return true
        } else {
          return false
        }
      } else {
        return false
      }
    },
    // 格式化时间戳
    dateFormat(time) {
      var date = new Date(time)// 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + '-'
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      var D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' '
      var h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':'
      var m = date.getMinutes() < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':'
      var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      return Y + M + D + h + m + s
    }
  }
}
</script>
